

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>博客搭建记录 - cxp&#39;s blog</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />

  
  
  <meta name="description" content=" 一、前言
从去年开始就一直想部署一个可以自己使用的博..."> 
  
  <meta name="author" content="Alex"> 

  
    <link rel="icon" href="/images/icons/favicon-16x16.png" type="image/png" sizes="16x16">
  
  
    <link rel="icon" href="/images/icons/favicon-32x32.png" type="image/png" sizes="32x32">
  
  
    <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png" sizes="180x180">
  
  
    <meta rel="mask-icon" href="/images/icons/stun-logo.svg" color="#333333">
  
  
    <meta rel="msapplication-TileImage" content="/images/icons/favicon-144x144.png">
    <meta rel="msapplication-TileColor" content="#000000">
  

  <link rel="stylesheet" href="/css/style.css">

  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1445822_h1619vhl1nr.css">
  

  
  
  <link rel="stylesheet" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css">
  

  
  
  <link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css">
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      lazyload: {
        enable: true,
        loadingImage: '',
      },
      donate: {
        enable: true,
        alipay: 'https://pic.izhaoo.com/alipay.jpg',
        wechat: 'https://pic.izhaoo.com/wechat.jpg'
      },
      motto: {
        api: '',
        default: '我在开了灯的床头下，想问问自己的心啊。'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        alwaysShow: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: true
      }
    }
  </script>

  

  
<link rel="alternate" href="/atom.xml" title="cxp's blog" type="application/atom+xml">
</head>
<body class="lock-screen">
  <div class="loading"></div>
  


<nav class="navbar">
  <div class="left"></div>
  <div class="center">博客搭建记录</div>
  <div class="right">
    <i class="iconfont iconmenu j-navbar-menu"></i>
  </div>
</nav>

  <nav class="menu">
  <div class="menu-wrap">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content">
      
      
      
      
      <li class="menu-item"><a href="/ " class="underline"> 首页</a></li>
      
      
      
      
      <li class="menu-item"><a href="/galleries " class="underline"> 摄影</a></li>
      
      
      
      
      <li class="menu-item"><a href="/archives " class="underline"> 归档</a></li>
      
      
      
      
      <li class="menu-item"><a href="/tags " class="underline"> 标签</a></li>
      
      
      
      
      <li class="menu-item"><a href="/categories " class="underline"> 分类</a></li>
      
      
      
      
      <li class="menu-item"><a href="/about " class="underline"> 关于</a></li>
      
    </ul>
    <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
  </div>
</nav>
  <main id="main">
  <div class="container" id="container">
    <article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">博客搭建记录</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>三月 01, 2019</span
        class="post-info-item">
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>1637</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content">
        <h1 id="一-前言"><a class="markdownIt-Anchor" href="#一-前言"></a> 一、前言</h1>
<p>从去年开始就一直想部署一个可以自己使用的博客，用来记录点东西，省的到后来用到的时候害的重新查询，一直百度。直到这个月要开始找工作了，有一个自己的博客不仅能够用来记录学习路线，还能够更直观的把自己展示给他人看，因此决定自己一搞一个人博客。花了点时间对比部署方案后，选择了最省钱的Hexo+Github,跟随教程花了点时间配置，下面主要记录下配置过程。</p>
<h1 id="二-准备阶段"><a class="markdownIt-Anchor" href="#二-准备阶段"></a> 二、准备阶段</h1>
<ol>
<li>注册一个github账号</li>
<li>安装node.js、npm</li>
<li>安装git</li>
</ol>
<p><strong>注：我是在Windows7 里面进行设置部署</strong></p>
<h1 id="三-开始搭建博客"><a class="markdownIt-Anchor" href="#三-开始搭建博客"></a> 三、开始搭建博客</h1>
<h2 id="1-github中创建仓库"><a class="markdownIt-Anchor" href="#1-github中创建仓库"></a> 1、github中创建仓库</h2>
<p>在github中新建仓库，<a href="http://xn--xxx-c88d89xgtao27c.github.io" target="_blank" rel="noopener">并命名为xxx.github.io</a>,注意<strong>xxx</strong>和你的github的账户名是相同的，后来你网站的域名将会是https：<a href="//xxx.github.io.xn--siq0gnk75pyofnxs">//xxx.github.io.所以为了域名</a>，你可以设置一个好听的仓库名。<br />
创建成功后，所有的网站文件都会被上传到这个仓库中。</p>
<h2 id="2-配置ssh-key"><a class="markdownIt-Anchor" href="#2-配置ssh-key"></a> 2、配置SSH key</h2>
<p>这是为了让自己有权限用git，提交文件到github中来。具体的步骤是在本机中找到./ssh文件夹，我换系统的时候经常没有因此，需要生成：用git bash：</p>
<pre><code>ssk-keygen -t rsa -C 'emailaddress'
</code></pre>
<p>然后按三次回车，就会在c盘user下面生成./ssh文件，将id_rsa.pub中的文本根据下面的配置添加到key中，其中title可以随便起名。<br />
<img   class="lazyload" data-original="https://i.imgur.com/ZgiejaH.png" src=""  alt="" /><img   class="lazyload" data-original="https://i.imgur.com/5MmJjHP.png" src=""  alt="" /></p>
<p>还需要进行配置：</p>
<pre><code>git config --global user.name &quot;xxx&quot;// 你的github用户名，非昵称
git config --global user.email  &quot;email&quot;// github注册邮箱
</code></pre>
<h2 id="3-搭建博客雏形"><a class="markdownIt-Anchor" href="#3-搭建博客雏形"></a> 3、搭建博客雏形</h2>
<ol>
<li>
<p>安装hexo、初始化<br />
npm install -g hexo<br />
建立一个文件夹，用于本地blog存储，进入文件夹内，打开git bash并进行初始化：</p>
<p>hexo init<br />
hexo g #生成<br />
hexo s #启动服务<br />
如下：<br />
<img   class="lazyload" data-original="https://i.imgur.com/8pAiFNI.png" src=""  alt="" /></p>
</li>
</ol>
<h2 id="4-修改主题"><a class="markdownIt-Anchor" href="#4-修改主题"></a> 4、修改主题</h2>
<p>博客还是用来进行阅读的因此稳定性比较重要，现在用户最多的还是next主题，因此我选用的也是next：<br />
下载，还是在刚才的文件夹下<br />
使用git bash：</p>
<pre><code>git clone https://github.com/iissnan/hexo-theme-next themes/next
</code></pre>
<p>done之后就可以在根目录下发现有一个theme的文件夹里面有next文件，更改样式时，一般是时修改next文件里面的配置文件。安装好主题之后，可以浏览器打开本地<br />
localhost:4000站点进行访问</p>
<p>到现在，基本的博客雏形已经出现了，下面就是开始hexo的配置。</p>
<p>配置部分我直接贴链接了，非常感谢下面大神的指导！</p>
<h2 id="5-主题优化"><a class="markdownIt-Anchor" href="#5-主题优化"></a> 5、主题优化</h2>
<ul>
<li><a href="http://blog.ynxiu.com/2016/hexo-next-theme-optimize.html" target="_blank" rel="noopener" title="量子广告的博客">http://blog.ynxiu.com/2016/hexo-next-theme-optimize.html</a></li>
<li><a href="https://www.simon96.online/2018/10/12/hexo-tutorial/" target="_blank" rel="noopener" title="遇见西门">https://www.simon96.online/2018/10/12/hexo-tutorial/</a></li>
<li><a href="http://blog.321zou.com/" target="_blank" rel="noopener" title="TOP猜想">http://blog.321zou.com/</a></li>
</ul>
<h1 id="四-问题汇总"><a class="markdownIt-Anchor" href="#四-问题汇总"></a> 四、问题汇总</h1>
<blockquote>
<p>后续更新</p>
</blockquote>
<ul>
<li><strong>MarkdownPad2中添加的图片不能显示</strong>：先要配置<code>_config.yml</code>,找到<code>post_asset_folder</code>设为<code>true</code>后，以后再创建文章就会在文章目录生成一个同名文件夹，可以将文章配图放在此文件夹中，然后在写文章时下入相对路径就可以。<code>![](图片名)</code></li>
<li><strong>怎么在文章中添加文件下载</strong>：和上一个问题解决办法一样，先修改配置文件，然后再在source下新建文件夹downloads，把需要下载的文件放入到该文件夹下就可以，在以后发布文章时，只要在文中添加 <code>[点击下载](/downloads/filename)</code>之后，这样部署之后的网站，就可以看到下载链接和进行下载文件了。</li>
</ul>
<p><img   class="lazyload" data-original="%E9%BB%84.gif" src=""  alt="" /></p>

      </section>
      <section class="extra">
        
        <ul class="copyright">
  
  <li><strong>本文作者：</strong>Alex</li>
  <li><strong>本文链接：</strong><a href="https://cxpeng.cn/archives/ee940876.html">https://cxpeng.cn/archives/ee940876.html</a></li>
  <li><strong>版权声明：</strong>本博客所有文章均采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
      rel="external nofollow" target="_blank"> BY-NC-SA </a>许可协议，转载请注明出处！</li>
  
</ul>
        
        
        <section class="donate">
  <div class="qrcode">
    <img   class="lazyload" data-original="https://pic.izhaoo.com/alipay.jpg" src="" >
  </div>
  <div class="icon">
    <a href="javascript:;" target="_blank" rel="noopener" id="alipay"><i class="iconfont iconalipay"></i></a>
    <a href="javascript:;" target="_blank" rel="noopener" id="wechat"><i class="iconfont iconwechat-fill"></i></a>
  </div>
</section>
        
        
        
<nav class="nav">
  
    <a href="/archives/e5d37995.html"><i class="iconfont iconleft"></i>航空公司客户价值分析</a>
  
  
    <a href="/archives/e27e22b8.html">Linux安装opencv和vscode工具配置<i class="iconfont iconright"></i></a>
  
</nav>

      </section>
      
      <section class="comments">
  
  <div class="btn" id="comments-btn">查看评论</div>
  
  
</section>
      
    </section>
  </div>
</article>
  </div>
</main>
  <footer class="footer">
  <div class="footer-social">
    
    
    
    
    
    <a href="tencent://message/?Menu=yes&uin=894519210 " target="_blank" onMouseOver="this.style.color= '#12B7F5'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconQQ "></i>
    </a>
    
    
    
    
    
    <a href="javascript:; " target="_blank" onMouseOver="this.style.color= '#09BB07'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconwechat-fill "></i>
    </a>
    
    
    
    
    
    <a href="https://www.instagram.com/izhaoo/ " target="_blank" onMouseOver="this.style.color= '#DA2E76'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconinstagram "></i>
    </a>
    
    
    
    
    
    <a href="https://github.com/izhaoo " target="_blank" onMouseOver="this.style.color= '#24292E'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  icongithub-fill "></i>
    </a>
    
    
    
    
    
    <a href="mailto:izhaoo@163.com " target="_blank" onMouseOver="this.style.color='#FFBE5B'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconmail"></i>
    </a>
    
  </div>
  <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  <div class="fab fab-daovoice">
    <i class="iconfont iconcomment"></i>
  </div>
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>




<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




<script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/modules.js"></script>
<script src="/js/zui.js"></script>
<script src="/js/script.js"></script>




<script>
  (function (i, s, o, g, r, a, m) {
    i["DaoVoiceObject"] = r;
    i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o), m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    a.charset = "utf-8";
    m.parentNode.insertBefore(a, m)
  })(window, document, "script", ('https:' == document.location.protocol ? 'https:' : 'http:') +
    "//widget.daovoice.io/widget/0f81ff2f.js", "daovoice")
  daovoice('init', {
    app_id: "abcdefg"
  }, {
    launcher: {
      disableLauncherIcon: true,
    },
  });
  daovoice('update');
</script>



<script>
  (function () {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
  })();
</script>


<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?4c204d8bc027a0455b5fc642ac334ca8";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>










</html>